<template>
	<view class="content">
		<threeChoose :mulunum="mulunum" :fatherToInfo='fatherToInfo' @fildid='fildid'></threeChoose>
		<!-- <uni-collapse accordion="true"@change = getdata(item.id)  v-for="item in dataList" :key="item.id" >
		    <uni-collapse-item :title="item.name"  @click.stop="getdata(item.id)" >
		        <view style="padding: 30rpx;" v-for="l in child" :key="l.id" >
		           <view @click.stop="selecttwo(l)" class="twoname">
				        <text>{{l.name}}</text>
				        <view class="threeitem" >
							<view v-if='index==active' v-for="(i,index) in childthree" :key="index" @click.stop="selectArea(i)">{{i.name}}</view>
						</view>
				   </view> 
		        </view>
		    </uni-collapse-item>
		</uni-collapse> -->
		<!-- <view class="row"  @click="selectArea(item)" v-for="item in dataList" :key="item.id"> -->
		<!-- 	<view class="row"  @click="getdata(item.id)" v-for="item in dataList" :key="item.id">
			<view class="tit">
				{{item.name}}
			</view>
			<image src="../../static/icon/right_arrow.png" class="arrow"></image>
		</view> -->
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import threeChoose from '../../components/three-choose/three-choose.vue';
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			threeChoose
		},
		data() {
			return {
				child: [],
				childnext: [],
				childthree: [],
				addressData: {
					name: '',
					mobile: '',
					rank: '',
					room: ''
				},
				active: '0',
				dataList: [

				],
				fatherToInfo: {
					defaultIcon: '../../static/mix-tree/defaultIcon.png', //展开后图标
					currentIcon: '../../static/mix-tree/currentIcon.png', //恢复后图标
					firstImg: '../../static/mix-tree/ship_muluquan.png', //顶层展示图片
					shoufenq: true, //一级下拉是否需要手风琴效果
					twoshoufenq: true, //二级下拉是否需要手风琴效果
					firstfontsize: 30,
					firstcolor: '#000',
					secondImg: '',
					secondfontsize: 28,
					secondcolor: '#333333',
					thirdImg: '../../static/mix-tree/ship_bofanging.png',
					thirdfontsize: 26,
					thirdcolor: '#666',
					choosedcolor: 'red',
					thirdrightfontsize: 26,
					thirdrightcolor: '#666', //第三项字体颜色
					thirdrightchoosed: 'red' //右侧被选中后的颜色变化
				},
				mulunum: []
			};
		},

		onLoad(option) {
			this.getdata(0)
		},
		methods: {

			getdata(id) {
				// this.dataList=[]
				if (id !== 0) {
					this.child = []
				}
				this.$http.get('/userCenter/getFieldList', {
					parentId: id
				}).then(res => {
					if (res.code == '0') {
						this.mulunum = res.data

					}
				})
			},
			fildid(name) {
				console.log(name)
				let pages = getCurrentPages()
				let nowpages = pages[pages.length - 1]
				let prepages = pages[pages.length - 2]
				prepages.$vm.field = name
				console.log(name)
				uni.navigateBack({
					delta: 1
				})
			},

			//选择领域
			selecttwo(id) {
				console.log(id)
				this.$http.get('/userCenter/getFieldList', {
					parentId: id.id
				}).then(res => {

					if (res.code == '0') {
						console.log(res.data)
						this.childthree = res.data



					}
				})
			},

			selectArea(item) {


				let pages = getCurrentPages()
				let nowpages = pages[pages.length - 1]
				let prepages = pages[pages.length - 2]
				prepages.$vm.field = item
				console.log(item)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		// padding-top: 16upx;
		// background-color: #fff;
	}

	.content {
		background-color: #fff;

		// padding-bottom: 72upx;
		.row {
			display: flex;
			align-items: center;
			position: relative;
			margin: 0 30upx;
			height: 110upx;
			line-height: 110upx;
			background: #fff;
			border-bottom: 1upx solid rgba(238, 238, 238, 1);
			justify-content: space-between;

			&:last-child {
				border-bottom: none;
			}

			.arrow {
				width: 14upx;
				height: 24upx;
			}

			.tit {
				flex-shrink: 0;
				// width: 200upx;
				font-size: 30upx;

				>text {
					color: #ff1a1a;
					font-size: 40upx;
				}
			}
		}

		.twoname {
			font-size: 28upx;
			color: #333;
			position: relative;

			.threeitem {
				position: absolute;
				width: 100%;
				// height: 80upx;
				color: #555;
				font-size: 27upx;
			}
		}

		/deep/.uni-collapse-cell__title {
			background: #FFFFFF;
		}
	}
</style>
